<template>
    <div class="menutype">
        <div v-for='(item, index) in scrollmenu' :title="item.name" @click="gotitle(item.path)">
            <van-icon :name="item.icon" color="red" />
            <div>{{
                item.name
            }}</div>
        </div>
    </div>


</template>

<script  setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router'
import { showToast } from 'vant';
import { useStore } from 'vuex'
const store = useStore()


const router = useRouter();
const scrollmenu = ref([
    { name: "每日推荐", path: 'sheetdetail', icon: 'invitation' },
    { name: "歌单", path: 'tagSheet', icon: 'todo-list' },
    { name: "排行榜", path: 'ranking', icon: 'fire' },
    { name: "歌手", path: 'singer', icon: 'audio' },
])
const gotitle = async (path) => {

    if (path == 'sheetdetail') {
        if (cookie.value != null && cookie.value != '') {
            router.push({
                name: 'sheetdetail',
            })
        } else {
            showToast('请先登陆');
        }
    } else {

        router.push({
            name: path,
        })

    }


}
const cookie = computed(() => {
    return localStorage.getItem('cookie')
})
</script>

<style scoped>
.menutype {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    font-size: 14px;
    color: #646566
}
</style>
